
@import '../../styles/default.scss';

.mine-order-page {
  height: 100vh;
  background-color: $color-bg;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(constant(safe-area-inset-bottom));
  bottom: calc(env(safe-area-inset-bottom));
  overflow: hidden;
  .mineorder-list-container {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 100vw;
    min-height: 80PX;
    .header-wrapper {
      position: fixed;
      height: 40PX;
      width: 100%;
      left: 0;
      top: 0;
      z-index: 9;
      display: flex;
      justify-content: space-around;
      align-items: center;
      background-color: $color-white;
      padding: 10px 0;
      .input-box {
        flex: 0.8;
        height: 30PX;
        border-radius: 15PX;
        .address-search{
          height: 30PX;
        }
      }
      .search-box {
        // flex: 0.2;
        margin-left: 10px;
        font-size: $font-15;
      }
    }
    .filter-wrapper {
      position: fixed;
      width: 100%;
      left: 0;
      top: 50PX;
      height: 62px;
      z-index: 9;
      background-color: $color-white;
      box-sizing: border-box;
    }
  }
  
  .mine-order-list{
    // padding: 0 28px;
    position: absolute;
    top: 80PX;
    width: 100%;
    padding-top: 18px;
    height: calc(100% - 90PX);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: $color-bg;
  }
}

.order-list-view{
  .tip{
    font-size: $font-15;
  }
  .loaded{
    font-size: $font-15;
  }
}

.order-list-empty{
  height: 100%;
  font-size: $font-15;
  color: $font-color-grey;
  text-align: center;
  &-img{
    @include wh(132PX, 138PX);
    @include bg('../../assets/icon_order_null.png');
    margin: 0 auto;
    margin-top: 40%;
  }
}

.btns-flex{
  width: 100%;
  padding-bottom: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}